<template>
  <div>
    <div class="picker-item">
      <CloudDatePicker show-time placeholder="Select Time" @change="onChange" @ok="onOk" />
    </div>
    <CloudRangePicker
      :show-time="{ format: 'HH:mm' }"
      format="YYYY-MM-DD HH:mm"
      :placeholder="['Start Time', 'End Time']"
      @change="onChange"
      @ok="onOk"
    />
  </div>
</template>

<script>
  export default {
    title: '6.日期时间选择',
    subTitle: '增加选择时间功能，当 showTime 为一个对象时，其属性会传递给内建的 TimePicker。',
    data () {
      return {
      }
    },
    methods: {
      onChange (value, dateString) {
        console.log('Selected Time: ', value);
        console.log('Formatted Selected Time: ', dateString);
      },
      onOk (value) {
        console.log('onOk: ', value);
      },
    }
  }
</script>
<style lang="scss" scoped>
  .picker-item {
    padding-bottom: 10px;
  }
</style>